<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="邀请家人" autoBack>
			</u-navbar>
		</view>
		<view class="con-body" >
			<image class="main_img" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20220825/4530620b6840398225c62a7ad5607045.jpg"></image>
			<view class="content">
				<view class="con_list">
					<view>
						<text class="dian"></text>
						<text>被邀请人身份</text>
					</view>
					<view class="type_con">
						<text :class="type==0 ? 'active' : ''" @click="selecttype(0)">家人</text>
						<text :class="type==1 ? 'active' : ''" @click="selecttype(1)">租户</text>
					</view>
				</view>
				<view class="con_list">
					<view>
						<text class="dian"></text>
						<text>姓名</text>
					</view>
					<input v-model="name" type="text">
				</view>
				<view class="con_list">
					<view>
						<text class="dian" ></text>
						<text>手机号码</text>
					</view>
					<input v-model="tel" type="text">
				</view>
				<view class="con_list">
					<view>
						<text class="dian" ></text>
						<text>身份证号</text>
					</view>
					<input v-model="identity" type="text">
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
			<u-modal :show="show" :showCancelButton="true" confirmColor="#0B868E" :closeOnClickOverlay="true" :title='content' @confirm="confirm"></u-modal>
			<u-button :customStyle="btnStyle" @click="show=true">提交邀请</u-button>
		</view>
		
	</view>
</template>

<script>
	import { family } from "@/service/userService.js";
	export default {
		data () {
			return {
				name:'',
				tel:'',
				identity:'',
				type:0,
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '2%',
					marginTop: '50rpx',
					marginBottom: '30rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',
				},
				show:false,
				content:'是否确认提交邀请信息？'
			}
		},
		methods:{
			selecttype(i){
				this.type=i;
			},
			confirm(){
				family({
					name:this.name,
					tel:this.tel,
					type:this.type
				}).then(res=>{
					if (res.code == 200) {
						this.$refs.uToast.show({
							type: 'success',
							title: '提交成功',
							icon:false
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					} else {
						this.$refs.uToast.show({
							type: 'error',
							title: res.msg,
							icon:false
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.main_img{
		width:100%;
	}
	.content{
		
		background-color: #fff;
		padding:20rpx;
		.con_list{
			padding:20rpx 0;
			.dian{
				display: inline-block;
				width:13rpx;
				height:13rpx;
				border-radius: 50%;;
				// font-size: 65rpx;
				background-color:#0B868E;
				margin-right:20rpx;
				vertical-align: middle;
			}
			input{
				border-bottom: 1rpx solid #ddd;
				margin-top:10rpx;
			}
		}
		.type_con {
			margin-top:20rpx;
			text{
				padding:5rpx 20rpx;
				color:#0B868E;
				border-radius: 28rpx;
				margin-left:30rpx;
				border:1rpx solid #0B868E;
			}
			text.active{
				// border:none;
				background-color: #0B868E;
				color:#fff;
			}
		}
	
		
	}
</style>